<template>
  <view class="container">
    <view class="input-area">
      <text>输入值: </text>
      <input 
        type="text" 
        v-model="title" 
        style="color: red; border: 1px solid #ccc; padding: 8rpx;" 
        placeholder="请输入要传递的值"
      />
    </view>

    <view class="input-area">
      <text>回传值: </text>
      <input 
        type="text" 
        :value="callBackValue" 
        style="color: plum; border: 1px solid #ccc; padding: 8rpx;" 
        placeholder="组件B回传的值"
        readonly
      />
    </view>

    <!-- 子组件A：接收父组件值 + 触发事件传递数据给父组件 -->
    <comA 
      :intent="title" 
      @sendToCompB="handleSendToCompB"
      style="margin: 30rpx 0;"
    ></comA>

    <!-- 子组件B：接收父组件传递的（来自A的数据） + 回传数据给父组件 -->
    <comB 
      :fromCompA="compAData" 
      @callBackFun="handleCallBack"
      style="margin: 30rpx 0;"
    ></comB>
  </view>
</template>

<script>
// 关键：按项目目录结构修正组件导入路径（向上退4级到根目录）
import comA from '../../../../components/compA.vue'
import comB from '../../../../components/compB.vue'

export default {
  name: "intentPage",
  components: { comA, comB }, // 注册组件
  data() {
    return {
      title: "", // 父组件输入值（传递给comA）
      callBackValue: "", // 接收comB的回传值
      compAData: "" // 接收comA传递的数据（再转发给comB）
    };
  },
  methods: {
    // 接收comA传递的数据，存储后转发给comB
    handleSendToCompB(data) {
      console.log("父组件接收comA的数据：", data);
      this.compAData = data;
    },
    // 接收comB的回传值，显示在页面上
    handleCallBack(data) {
      console.log("父组件接收comB的回传值：", data);
      this.callBackValue = data;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: #fff;
  min-height: 100vh;
}
.input-area {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex-wrap: wrap;
}
input {
  flex: 1;
  border-radius: 6rpx;
  font-size: 28rpx;
}
text {
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
}
</style>